import AppRouter from './components/AppRouter';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from '@/views/LoginPage';
import NotFound from '@/views/NotFound';
import { App as AntApp, ConfigProvider, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { useSelector } from 'react-redux';
import { useEffect, useRef } from 'react';

function App() {
  const darkTheme = useSelector(state => state.theme.darkTheme);
  const themeSwitchPosition = useSelector(state => state.theme.themeSwitchPosition);
  const componentSize = useSelector(state => state.theme.componentSize); // 获取组件大小状态
  const isFirstRender = useRef(true);
  
  // 添加主题切换时的扩散动画效果
  useEffect(() => {
    // 跳过初始渲染时的动画
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    
    // 只有当themeSwitchPosition存在时才触发动画
    if (!themeSwitchPosition) {
      return;
    }
    
    const handleThemeSwitch = () => {
      // 创建扩散动画元素
      const ripple = document.createElement('div');
      ripple.style.position = 'fixed';
      ripple.style.left = `${themeSwitchPosition.x}px`;
      ripple.style.top = `${themeSwitchPosition.y}px`;
      ripple.style.width = '0';
      ripple.style.height = '0';
      ripple.style.borderRadius = '50%';
      ripple.style.backgroundColor = darkTheme ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
      ripple.style.transform = 'translate(-50%, -50%)';
      ripple.style.zIndex = '9999';
      ripple.style.transition = 'all 0.6s ease-out';
      document.body.appendChild(ripple);
      
      // 触发动画
      setTimeout(() => {
        const maxDimension = Math.max(window.innerWidth, window.innerHeight) * 2;
        ripple.style.width = `${maxDimension}px`;
        ripple.style.height = `${maxDimension}px`;
        ripple.style.opacity = '0';
      }, 10);
      
      // 动画结束后移除元素
      setTimeout(() => {
        if (ripple.parentNode) {
          ripple.parentNode.removeChild(ripple);
        }
      }, 600);
    };
    
    handleThemeSwitch();
  }, [darkTheme, themeSwitchPosition]);
  
  return (
    <div style={{height:'100vh',backgroundColor: darkTheme ? '#141414' : '#ffffff'}}>
      <ConfigProvider 
        locale={zhCN}
        theme={{ 
          algorithm: darkTheme ? theme.darkAlgorithm : theme.defaultAlgorithm,
          components: {
            Layout: {
              headerBg: darkTheme ? '#141414' : '#ffffff',
              siderBg: darkTheme ? '#141414' : '#ffffff',
              bodyBg: darkTheme ? '#141414' : '#ffffff',
              footerBg: darkTheme ? '#141414' : '#ffffff',
              triggerBg:darkTheme ? '#1d1d1d' : '#fafafa',
              triggerColor: darkTheme ? '#ffffff' : '#000000',
            },
            Tabs: {
              cardBg: darkTheme ? '#141414' : '#ffffff'
            }
          }
        }}
        componentSize={componentSize} // 使用 Redux 中的状态控制组件大小
      >
        <AntApp>
          <Router>
            <Routes>
              <Route path="/login" element={<Login />} />
              <Route path="/404" element={<NotFound />} />
              <Route path="/*" element={
                <AppRouter />
              } />
            </Routes>
          </Router>
        </AntApp>
      </ConfigProvider>
    </div>
  );
}

export default App;